

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Quick overview &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.0/en/html/get-started/quick-overview.html" />

  
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Simulator on PC" href="pc-simulator.html" />
    <link rel="prev" title="Get started" href="index.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.0
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#nothing-happens-my-display-driver-is-not-called-what-have-i-missed">Nothing happens, my display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-i-see-nonsense-colors-on-the-screen">Why I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Get started</a><ul class="current">
<li class="toctree-l2 current"><a class="current reference internal" href="#">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="#id1">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="stm32.html">STM32</a></li>
<li class="toctree-l2"><a class="reference internal" href="nxp.html">NXP</a><ul>
<li class="toctree-l3"><a class="reference internal" href="nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="nxp.html#adding-hw-acceleration-for-nxp-imx-rt-platforms-using-pxp-pixel-pipeline-engine-for-existing-projects">Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects</a><ul>
<li class="toctree-l4"><a class="reference internal" href="nxp.html#features-supported">Features supported:</a></li>
<li class="toctree-l4"><a class="reference internal" href="nxp.html#basic-configuration">Basic configuration:</a></li>
<li class="toctree-l4"><a class="reference internal" href="nxp.html#basic-initialization">Basic initialization:</a></li>
<li class="toctree-l4"><a class="reference internal" href="nxp.html#project-setup">Project setup:</a></li>
<li class="toctree-l4"><a class="reference internal" href="nxp.html#advanced-configuration">Advanced configuration:</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="espressif.html">Espressif (ESP32)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="espressif.html#get-the-lvgl-demo-project-for-esp32">Get the LVGL demo project for ESP32</a></li>
<li class="toctree-l3"><a class="reference internal" href="espressif.html#use-lvgl-in-your-esp32-project">Use LVGL in your ESP32 project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="espressif.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="espressif.html#get-lvgl">Get LVGL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="espressif.html#use-lvgl-esp32-drivers-in-your-project">Use lvgl_esp32_drivers in your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="espressif.html#support-for-esp32-s2">Support for ESP32-S2</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="arduino.html">Arduino</a><ul>
<li class="toctree-l3"><a class="reference internal" href="arduino.html#get-the-lvgl-ardunio-library">Get the LVGL Ardunio library</a></li>
<li class="toctree-l3"><a class="reference internal" href="arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="arduino.html#configure-the-examples">Configure the examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="arduino.html#initialize-lvgl-and-run-an-example">Initialize LVGL and run an example</a></li>
<li class="toctree-l3"><a class="reference internal" href="arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#here-are-some-advantages-of-using-lvgl-in-micropython">Here are some advantages of using LVGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#micropython-lvgl-could-be-used-for">Micropython + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="nuttx.html#what-is-nuttx">What is NuttX?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#highlights-of-nuttx">Highlights of NuttX</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#here-are-some-advantages-of-using-lvgl-in-nuttx">Here are some advantages of using LVGL in NuttX</a></li>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#nuttx-lvgl-could-be-used-for">NuttX + LVGL could be used for</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#first-you-need-to-install-the-pre-requisite-on-your-system">First you need to install the pre-requisite on your system</a></li>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#now-let-s-to-create-a-workspace-to-save-our-files">Now let's to create a workspace to save our files</a></li>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#clone-the-nuttx-and-apps-repositories">Clone the NuttX and Apps repositories:</a></li>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#configure-nuttx-to-use-the-stm32f429i-disco-board-and-the-lvgl-demo">Configure NuttX to use the stm32f429i-disco board and the LVGL Demo</a></li>
<li class="toctree-l4"><a class="reference internal" href="nuttx.html#flashing-the-firmware-in-the-board-using-openocd">Flashing the firmware in the board using OpenOCD:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set-up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../overview/index.html">Overview</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../overview/object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#states">States</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#transform-angle">transform_angle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/scroll.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/indev.html#pointers">Pointers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#compress-fonts">Compress fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#add-new-font">Add new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#load-font-at-run-time">Load font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#add-a-new-font-engine">Add a new font engine</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#add-a-driver">Add a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#use-drivers-for-images">Use drivers for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/animation.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/animation.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/drawing.html#masking">Masking</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#screens">Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-command-line">From command line</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-2-16-07-2021">v8.0.2 (16.07.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-1-14-06-2021">v8.0.1 (14.06.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-0-01-06-2021">v8.0.0 (01.06.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#directory-structure">Directory structure</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#widget-changes">Widget changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-scrolling">New scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-layouts">New layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#driver-changes">Driver changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#other-changes">Other changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-release-policy">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v7-to-v8">Migrating from v7 to v8</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-11-0-16-03-2021">v7.11.0 (16.03.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-features">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#bugfixes">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-1-16-02-2021">v7.10.1 (16.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id1">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-0-02-02-2021">v7.10.0 (02.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id2">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id3">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-1-19-01-2021">v7.9.1 (19.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id4">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-0-05-01-2021">v7.9.0 (05.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id5">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id6">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-1-15-12-2020">v7.8.1 (15.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id7">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-0-01-12-2020">v7.8.0 (01.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id8">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id9">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-2-17-11-2020">v7.7.2 (17.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id10">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-1-03-11-2020">v7.7.1 (03.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id11">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-0-20-10-2020">v7.7.0 (20.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id12">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id13">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-1-06-10-2020">v7.6.1 (06.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id14">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-0-22-09-2020">v7.6.0 (22.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id15">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id16">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-5-0-15-09-2020">v7.5.0 (15.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id17">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id18">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-4-0-01-09-2020">v7.4.0 (01.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id19">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id20">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-1-18-08-2020">v7.3.1 (18.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id21">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-0-04-08-2020">v7.3.0 (04.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id22">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id23">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-2-0-21-07-2020">v7.2.0 (21.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id24">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id25">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-1-0-07-07-2020">v7.1.0 (07.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id26">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id27">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-2-16-06-2020">v7.0.2 (16.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id28">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-1-01-06-2020">v7.0.1 (01.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id29">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-0-18-05-2020">v7.0.0 (18.05.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#documentation">Documentation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#legal-changes">Legal changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-drawing-system">New drawing system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-style-system">New style system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#gpu-integration">GPU integration</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#renames">Renames</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#reworked-and-improved-object">Reworked and improved object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-object-types">New object types</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#others">Others</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#demos">Demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id30">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v6-to-v7">Migrating from v6 to v7</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8-x">v8.X</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#ideas">Ideas</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8">v8</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          



















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="index.html">Get started</a> &raquo;</li>
        
      <li>Quick overview</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <!-- User defined GitHub URL -->
              <a href="https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/docs/get-started/quick-overview.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="quick-overview">
<h1>Quick overview<a class="headerlink" href="#quick-overview" title="Permalink to this headline">¶</a></h1>
<p>Here you can learn the most important things about LVGL.
You should read this first to get a general impression and read the detailed <a class="reference internal" href="../porting/index.html"><span class="doc">Porting</span></a> and <a class="reference internal" href="../overview/index.html"><span class="doc">Overview</span></a> sections after that.</p>
<div class="section" id="get-started-in-a-simulator">
<h2>Get started in a simulator<a class="headerlink" href="#get-started-in-a-simulator" title="Permalink to this headline">¶</a></h2>
<p>Instead of porting LVGL to embedded hardware straight away, it's highly recommended to get started in a simulator first.</p>
<p>LVGL is ported to many IDEs to be sure you will find your favorite one.
Go to the <a class="reference internal" href="pc-simulator.html"><span class="doc">Simulators</span></a> section to get ready-to-use projects that can be run on your PC.
This way you can save the time of porting for now and get some experience with LVGL immediately.</p>
</div>
<div class="section" id="add-lvgl-into-your-project">
<h2>Add LVGL into your project<a class="headerlink" href="#add-lvgl-into-your-project" title="Permalink to this headline">¶</a></h2>
<p>If you would rather try LVGL on your own project follow these steps:</p>
<ul class="simple">
<li><p><a class="reference external" href="https://github.com/lvgl/lvgl/archive/master.zip">Download</a> or clone the library from GitHub with <code class="docutils literal notranslate"><span class="pre">git</span> <span class="pre">clone</span> <span class="pre">https://github.com/lvgl/lvgl.git</span></code>.</p></li>
<li><p>Copy the <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> folder into your project.</p></li>
<li><p>Copy <code class="docutils literal notranslate"><span class="pre">lvgl/lv_conf_template.h</span></code> as <code class="docutils literal notranslate"><span class="pre">lv_conf.h</span></code> next to the <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> folder, change the first <code class="docutils literal notranslate"><span class="pre">#if</span> <span class="pre">0</span></code> to <code class="docutils literal notranslate"><span class="pre">1</span></code> to enable the file's content and set the <code class="docutils literal notranslate"><span class="pre">LV_COLOR_DEPTH</span></code> defines.</p></li>
<li><p>Include <code class="docutils literal notranslate"><span class="pre">lvgl/lvgl.h</span></code> in files where you need to use LVGL related functions.</p></li>
<li><p>Call <code class="docutils literal notranslate"><span class="pre">lv_tick_inc(x)</span></code> every <code class="docutils literal notranslate"><span class="pre">x</span></code> milliseconds in a Timer or Task (<code class="docutils literal notranslate"><span class="pre">x</span></code> should be between 1 and 10). It is required for the internal timing of LVGL.
Alternatively, configure <code class="docutils literal notranslate"><span class="pre">LV_TICK_CUSTOM</span></code> (see <code class="docutils literal notranslate"><span class="pre">lv_conf.h</span></code>) so that LVGL can retrieve the current time directly.</p></li>
<li><p>Call <code class="docutils literal notranslate"><span class="pre">lv_init()</span></code></p></li>
<li><p>Create a draw buffer: LVGL will render the graphics here first, and send the rendered image to the display.
The buffer size can be set freely but 1/10 screen size is a good starting point.</p></li>
</ul>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_disp_draw_buf_t</span> <span class="n">draw_buf</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_color_t</span> <span class="n">buf1</span><span class="p">[</span><span class="n">DISP_HOR_RES</span> <span class="o">*</span> <span class="n">DISP_VER_RES</span> <span class="o">/</span> <span class="mi">10</span><span class="p">];</span>                        <span class="cm">/*Declare a buffer for 1/10 screen size*/</span>
<span class="n">lv_disp_draw_buf_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">draw_buf</span><span class="p">,</span> <span class="n">buf1</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">,</span> <span class="n">MY_DISP_HOR_RES</span> <span class="o">*</span> <span class="n">MY_DISP_VER_SER</span> <span class="o">/</span> <span class="mi">10</span><span class="p">);</span>  <span class="cm">/*Initialize the display buffer.*/</span>
</pre></div>
</div>
<ul class="simple">
<li><p>Implement and register a function which can copy the rendered image to an area of your display:</p></li>
</ul>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_disp_drv_t</span> <span class="n">disp_drv</span><span class="p">;</span>        <span class="cm">/*Descriptor of a display driver*/</span>
<span class="n">lv_disp_drv_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">disp_drv</span><span class="p">);</span>          <span class="cm">/*Basic initialization*/</span>
<span class="n">disp_drv</span><span class="p">.</span><span class="n">flush_cb</span> <span class="o">=</span> <span class="n">my_disp_flush</span><span class="p">;</span>    <span class="cm">/*Set your driver function*/</span>
<span class="n">disp_drv</span><span class="p">.</span><span class="n">buffer</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">draw_buf</span><span class="p">;</span>          <span class="cm">/*Assign the buffer to the display*/</span>
<span class="n">disp_drv</span><span class="p">.</span><span class="n">hor_res</span> <span class="o">=</span> <span class="n">MY_DISP_HOR_RES</span><span class="p">;</span>   <span class="cm">/*Set the horizontal resolution of the display*/</span>
<span class="n">disp_drv</span><span class="p">.</span><span class="n">ver_res</span> <span class="o">=</span> <span class="n">MY_DISP_VER_RES</span><span class="p">;</span>   <span class="cm">/*Set the vertical resolution of the display*/</span>
<span class="n">lv_disp_drv_register</span><span class="p">(</span><span class="o">&amp;</span><span class="n">disp_drv</span><span class="p">);</span>      <span class="cm">/*Finally register the driver*/</span>

<span class="kt">void</span> <span class="nf">my_disp_flush</span><span class="p">(</span><span class="n">lv_disp_drv_t</span> <span class="o">*</span> <span class="n">disp</span><span class="p">,</span> <span class="k">const</span> <span class="n">lv_area_t</span> <span class="o">*</span> <span class="n">area</span><span class="p">,</span> <span class="n">lv_color_t</span> <span class="o">*</span> <span class="n">color_p</span><span class="p">)</span>
<span class="p">{</span>
    <span class="kt">int32_t</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">;</span>
    <span class="cm">/*It&#39;s a very slow but simple implementation.</span>
<span class="cm">     *`set_pixel` needs to be written by you to a set pixel on the screen*/</span>
    <span class="k">for</span><span class="p">(</span><span class="n">y</span> <span class="o">=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">y1</span><span class="p">;</span> <span class="n">y</span> <span class="o">&lt;=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">y2</span><span class="p">;</span> <span class="n">y</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">for</span><span class="p">(</span><span class="n">x</span> <span class="o">=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">x1</span><span class="p">;</span> <span class="n">x</span> <span class="o">&lt;=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">x2</span><span class="p">;</span> <span class="n">x</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">set_pixel</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="o">*</span><span class="n">color_p</span><span class="p">);</span>
            <span class="n">color_p</span><span class="o">++</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="n">lv_disp_flush_ready</span><span class="p">(</span><span class="n">disp</span><span class="p">);</span>         <span class="cm">/* Indicate you are ready with the flushing*/</span>
<span class="p">}</span>
</pre></div>
</div>
<ul class="simple">
<li><p>Implement and register a function which can read an input device. E.g. for a touch pad:</p></li>
</ul>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_indev_drv_t</span> <span class="n">indev_drv</span><span class="p">;</span>           <span class="cm">/*Descriptor of a input device driver*/</span>
<span class="n">lv_indev_drv_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">indev_drv</span><span class="p">);</span>             <span class="cm">/*Basic initialization*/</span>
<span class="n">indev_drv</span><span class="p">.</span><span class="n">type</span> <span class="o">=</span> <span class="n">LV_INDEV_TYPE_POINTER</span><span class="p">;</span>    <span class="cm">/*Touch pad is a pointer-like device*/</span>
<span class="n">indev_drv</span><span class="p">.</span><span class="n">read_cb</span> <span class="o">=</span> <span class="n">my_touchpad_read</span><span class="p">;</span>      <span class="cm">/*Set your driver function*/</span>
<span class="n">lv_indev_drv_register</span><span class="p">(</span><span class="o">&amp;</span><span class="n">indev_drv</span><span class="p">);</span>         <span class="cm">/*Finally register the driver*/</span>

<span class="kt">void</span> <span class="nf">my_touchpad_read</span><span class="p">(</span><span class="n">lv_indev_t</span> <span class="o">*</span> <span class="n">indev</span><span class="p">,</span> <span class="n">lv_indev_data_t</span> <span class="o">*</span> <span class="n">data</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*`touchpad_is_pressed` and `touchpad_get_xy` needs to be implemented by you*/</span>
    <span class="k">if</span><span class="p">(</span><span class="n">touchpad_is_pressed</span><span class="p">())</span> <span class="p">{</span>
      <span class="n">data</span><span class="o">-&gt;</span><span class="n">state</span> <span class="o">=</span> <span class="n">LV_INDEV_STATE_PRESSED</span><span class="p">;</span>
      <span class="n">touchpad_get_xy</span><span class="p">(</span><span class="o">&amp;</span><span class="n">data</span><span class="o">-&gt;</span><span class="n">point</span><span class="p">.</span><span class="n">x</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">data</span><span class="o">-&gt;</span><span class="n">point</span><span class="p">.</span><span class="n">y</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
      <span class="n">data</span><span class="o">-&gt;</span><span class="n">state</span> <span class="o">=</span> <span class="n">LV_INDEV_STATE_RELEASED</span><span class="p">;</span>
    <span class="p">}</span>
 
<span class="p">}</span>
</pre></div>
</div>
<ul class="simple">
<li><p>Call <code class="docutils literal notranslate"><span class="pre">lv_timer_handler()</span></code> periodically every few milliseconds in the main <code class="docutils literal notranslate"><span class="pre">while(1)</span></code> loop or in an operating system task.
It will redraw the screen if required, handle input devices, animation etc.</p></li>
</ul>
<p>For a more detailed guide go to the <a class="reference internal" href="../porting/index.html"><span class="doc">Porting</span></a> section.</p>
</div>
<div class="section" id="learn-the-basics">
<h2>Learn the basics<a class="headerlink" href="#learn-the-basics" title="Permalink to this headline">¶</a></h2>
<div class="section" id="widgets">
<h3>Widgets<a class="headerlink" href="#widgets" title="Permalink to this headline">¶</a></h3>
<p>The graphical elements like Buttons, Labels, Sliders, Charts etc. are called objects or widgets. Go to <a class="reference internal" href="../widgets/index.html"><span class="doc">Widgets</span></a> to see the full list of available widgets.</p>
<p>Every object has a parent object where it is created. For example if a label is created on a button, the button is the parent of label.</p>
<p>The child object moves with the parent and if the parent is deleted the children will be deleted too.</p>
<p>Children can be visible only on their parent. It other words, the parts of the children outside of the parent are clipped.</p>
<p>A Screen is the &quot;root&quot; parent. You can have any number of screens.</p>
<p>To get the current screen call <code class="docutils literal notranslate"><span class="pre">lv_scr_act()</span></code>, and to load a screen use <code class="docutils literal notranslate"><span class="pre">lv_scr_load(scr1)</span></code>.</p>
<p>You can create a new object with <code class="docutils literal notranslate"><span class="pre">lv_&lt;type&gt;_create(parent)</span></code>. It will return an <code class="docutils literal notranslate"><span class="pre">lv_obj_t</span> <span class="pre">*</span></code> variable that can be used as a reference to the object to set its parameters.</p>
<p>For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider1</span> <span class="o">=</span> <span class="n">lv_slider_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
</pre></div>
</div>
<p>To set some basic attributes <code class="docutils literal notranslate"><span class="pre">lv_obj_set_&lt;parameter_name&gt;(obj,</span> <span class="pre">&lt;value&gt;)</span></code> functions can be used. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_x</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span>
<span class="n">lv_obj_set_y</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
</pre></div>
</div>
<p>The widgets have type specific parameters too which can be set by <code class="docutils literal notranslate"><span class="pre">lv_&lt;widget_type&gt;_set_&lt;parameter_name&gt;(obj,</span> <span class="pre">&lt;value&gt;)</span></code> functions. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_slider_set_value</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="mi">70</span><span class="p">,</span> <span class="n">LV_ANIM_ON</span><span class="p">);</span>
</pre></div>
</div>
<p>To see the full API visit the documentation of the widgets or the related header file (e.g. <a class="reference external" href="https://github.com/lvgl/lvgl/blob/master/src/widgets/lv_slider.h">lvgl/src/widgets/lv_slider.h</a>).</p>
</div>
<div class="section" id="events">
<h3>Events<a class="headerlink" href="#events" title="Permalink to this headline">¶</a></h3>
<p>Events are used to inform the user that something has happened with an object.
You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted etc.</p>
<p>A callback is assigned like this:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">btn_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_CLICKED</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span> <span class="cm">/*Assign a callback to the button*/</span>

<span class="p">...</span>

<span class="kt">void</span> <span class="n">btn_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">printf</span><span class="p">(</span><span class="s">&quot;Clicked</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Instead of <code class="docutils literal notranslate"><span class="pre">LV_EVENT_CLICKED</span></code> <code class="docutils literal notranslate"><span class="pre">LV_EVENT_ALL</span></code> can be used too to call the callback for any event.</p>
<p>From <code class="docutils literal notranslate"><span class="pre">lv_event_t</span> <span class="pre">*</span> <span class="pre">e</span></code> the current event code can be get with</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_event_code_t</span> <span class="n">code</span> <span class="o">=</span> <span class="n">lv_event_get_code</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
</pre></div>
</div>
<p>The object that triggered the event can be retrieved with</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
</pre></div>
</div>
<p>To learn all features of the events go to the <a class="reference internal" href="../overview/event.html"><span class="doc">Event overview</span></a> section.</p>
</div>
<div class="section" id="parts">
<h3>Parts<a class="headerlink" href="#parts" title="Permalink to this headline">¶</a></h3>
<p>Widgets might be built from one or more <em>parts</em>. For example a button has only one part called <code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code>.
However, a <a class="reference internal" href="../widgets/core/slider.html"><span class="doc">Slider</span></a> has <code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code>, <code class="docutils literal notranslate"><span class="pre">LV_PART_INDICATOR</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_PART_KNOB</span></code>.</p>
<p>By using parts you can apply different styles to different parts. (See below)</p>
<p>To learn which parts are used by which object read the widgets' documentation.</p>
</div>
<div class="section" id="states">
<h3>States<a class="headerlink" href="#states" title="Permalink to this headline">¶</a></h3>
<p>The objects can be in a combination of the following states:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_DEFAULT</span></code>  Normal, released state</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_CHECKED</span></code>  Toggled or checked state</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_FOCUSED</span></code> Focused via keypad or encoder or clicked via touchpad/mouse</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_FOCUS_KEY</span></code>  Focused via keypad or encoder but not via touchpad/mouse</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_EDITED</span></code> Edit by an encoder</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_HOVERED</span></code> Hovered by mouse (not supported now)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_PRESSED</span></code> Being pressed</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_SCROLLED</span></code> Being scrolled</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_STATE_DISABLED</span></code> Disabled</p></li>
</ul>
<p>For example, if you press an object it will automatically go to <code class="docutils literal notranslate"><span class="pre">LV_STATE_FOCUSED</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_STATE_PRESSED</span></code> state and when you release it, the  <code class="docutils literal notranslate"><span class="pre">LV_STATE_PRESSED</span></code> state will be removed.</p>
<p>To check if an object is in a given state use <code class="docutils literal notranslate"><span class="pre">lv_obj_has_state(obj,</span> <span class="pre">LV_STATE_...)</span></code>. It will return <code class="docutils literal notranslate"><span class="pre">true</span></code> if the object is in that state at that time.</p>
<p>To manually add or remove states use</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_state</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_STATE_</span><span class="p">...);</span>
<span class="n">lv_obj_clear_state</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_STATE_</span><span class="p">...);</span>
</pre></div>
</div>
</div>
<div class="section" id="styles">
<h3>Styles<a class="headerlink" href="#styles" title="Permalink to this headline">¶</a></h3>
<p>Styles contains properties such as background color, border width, font, etc to describe the appearance of the objects.</p>
<p>The styles are <code class="docutils literal notranslate"><span class="pre">lv_style_t</span></code> variables. Only their pointer is saved in the objects so they need to be static or global.
Before using a style it needs to be initialized with <code class="docutils literal notranslate"><span class="pre">lv_style_init(&amp;style1)</span></code>. After that properties can be added. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style1</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style1</span><span class="p">);</span>
<span class="n">lv_style_set_bg_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="n">lv_color_hex</span><span class="p">(</span><span class="mh">0xa03080</span><span class="p">))</span>
<span class="n">lv_style_set_border_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="mi">2</span><span class="p">))</span>
</pre></div>
</div>
<p>See the full list of properties <a class="reference external" href="/overview/style.html#properties">here</a>.</p>
<p>The styles are assigned to an object's part and state. For example to <em>&quot;Use this style on the slider's indicator when the slider is pressed&quot;</em>:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="n">LV_PART_INDICATOR</span> <span class="o">|</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>
</pre></div>
</div>
<p>If the <em>part</em> is <code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code> it can be omitted:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span> <span class="cm">/*Equal to LV_PART_MAIN | LV_STATE_PRESSED*/</span>
</pre></div>
</div>
<p>Similarly, <code class="docutils literal notranslate"><span class="pre">LV_STATE_DEFAULT</span></code> can be omitted too:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="n">LV_PART_INDICATOR</span><span class="p">);</span> <span class="cm">/*Equal to LV_PART_INDICATOR | LV_STATE_DEFAULT*/</span>
</pre></div>
</div>
<p>For <code class="docutils literal notranslate"><span class="pre">LV_STATE_DEFAULT</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code> simply write <code class="docutils literal notranslate"><span class="pre">0</span></code>:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="cm">/*Equal to LV_PART_MAIN | LV_STATE_DEFAULT*/</span>
</pre></div>
</div>
<p>The styles can be cascaded (similarly to CSS). It means you can add more styles to a part of an object.
For example <code class="docutils literal notranslate"><span class="pre">style_btn</span></code> can set a default button appearance, and <code class="docutils literal notranslate"><span class="pre">style_btn_red</span></code> can overwrite the background color to make the button red:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style1_btn_red</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
</pre></div>
</div>
<p>If a property is not set on for the current state the style with <code class="docutils literal notranslate"><span class="pre">LV_STATE_DEFAULT</span></code> will be used. If the property is not defined even in the default state a default value is used.</p>
<p>Some properties (typically the text-related ones) can be inherited. It means if a property is not set in an object it will be searched in its parents too.
For example, you can set the font once in the screen's style and all text on that screen will inherit it by default.</p>
<p>Local style properties also can be added to the objects. It creates a style which resides inside the object and which is used only by the object:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_style_bg_color</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="n">lv_color_hex</span><span class="p">(</span><span class="mh">0x2080bb</span><span class="p">),</span> <span class="n">LV_PART_INDICATOR</span> <span class="o">|</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>
</pre></div>
</div>
<p>To learn all the features of styles see the <a class="reference internal" href="../overview/style.html"><span class="doc">Style overview</span></a> section.</p>
</div>
<div class="section" id="themes">
<h3>Themes<a class="headerlink" href="#themes" title="Permalink to this headline">¶</a></h3>
<p>Themes are the default styles of the objects.
The styles from the themes are applied automatically when the objects are created.</p>
<p>You can select the theme to use in <code class="docutils literal notranslate"><span class="pre">lv_conf.h</span></code>.</p>
</div>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h2>
<div class="section" id="c">
<h3>C<a class="headerlink" href="#c" title="Permalink to this headline">¶</a></h3>
<div class="section" id="a-button-with-a-label-and-react-on-click-event">
<h4>A button with a label and react on click event<a class="headerlink" href="#a-button-with-a-label-and-react-on-click-event" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_get_started_1&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/get_started/lv_example_get_started_1.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_BTN</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">btn_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_event_code_t</span> <span class="n">code</span> <span class="o">=</span> <span class="n">lv_event_get_code</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_CLICKED</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">static</span> <span class="kt">uint8_t</span> <span class="n">cnt</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
        <span class="n">cnt</span><span class="o">++</span><span class="p">;</span>

        <span class="cm">/*Get the first child of the button which is the label and change its text*/</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_obj_get_child</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
        <span class="n">lv_label_set_text_fmt</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Button: %d&quot;</span><span class="p">,</span> <span class="n">cnt</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Create a button with a label and react on click event.</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_get_started_1</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>     <span class="cm">/*Add a button the current screen*/</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>                            <span class="cm">/*Set its position*/</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>                          <span class="cm">/*Set its size*/</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">btn_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_ALL</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>           <span class="cm">/*Assign a callback to the button*/</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">btn</span><span class="p">);</span>          <span class="cm">/*Add a label to the button*/</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Button&quot;</span><span class="p">);</span>                     <span class="cm">/*Set the labels text*/</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>

</pre></div>
</div>
</div>
</div>
<div class="section" id="create-styles-from-scratch-for-buttons">
<h4>Create styles from scratch for buttons<a class="headerlink" href="#create-styles-from-scratch-for-buttons" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_get_started_2&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/get_started/lv_example_get_started_2.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_BTN &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_btn</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_btn_pressed</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_btn_red</span><span class="p">;</span>

<span class="k">static</span> <span class="n">lv_color_t</span> <span class="nf">darken</span><span class="p">(</span><span class="k">const</span> <span class="n">lv_color_filter_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span><span class="p">,</span> <span class="n">lv_color_t</span> <span class="n">color</span><span class="p">,</span> <span class="n">lv_opa_t</span> <span class="n">opa</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">LV_UNUSED</span><span class="p">(</span><span class="n">dsc</span><span class="p">);</span>
    <span class="k">return</span> <span class="n">lv_color_darken</span><span class="p">(</span><span class="n">color</span><span class="p">,</span> <span class="n">opa</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">style_init</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a simple button style*/</span>
    <span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">);</span>
    <span class="n">lv_style_set_radius</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_style_set_bg_opa</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">LV_OPA_COVER</span><span class="p">);</span>
    <span class="n">lv_style_set_bg_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">lv_palette_lighten</span><span class="p">(</span><span class="n">LV_PALETTE_GREY</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span>
    <span class="n">lv_style_set_bg_grad_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_GREY</span><span class="p">));</span>
    <span class="n">lv_style_set_bg_grad_dir</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">LV_GRAD_DIR_VER</span><span class="p">);</span>

    <span class="n">lv_style_set_border_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">lv_color_black</span><span class="p">());</span>
    <span class="n">lv_style_set_border_opa</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">LV_OPA_20</span><span class="p">);</span>
    <span class="n">lv_style_set_border_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>

    <span class="n">lv_style_set_text_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="n">lv_color_black</span><span class="p">());</span>

    <span class="cm">/*Create a style for the pressed state.</span>
<span class="cm">     *Use a color filter to simply modify all colors in this state*/</span>
    <span class="k">static</span> <span class="n">lv_color_filter_dsc_t</span> <span class="n">color_filter</span><span class="p">;</span>
    <span class="n">lv_color_filter_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">color_filter</span><span class="p">,</span> <span class="n">darken</span><span class="p">);</span>
    <span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_pressed</span><span class="p">);</span>
    <span class="n">lv_style_set_color_filter_dsc</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_pressed</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">color_filter</span><span class="p">);</span>
    <span class="n">lv_style_set_color_filter_opa</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_pressed</span><span class="p">,</span> <span class="n">LV_OPA_20</span><span class="p">);</span>

    <span class="cm">/*Create a red style. Change only some colors.*/</span>
    <span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_red</span><span class="p">);</span>
    <span class="n">lv_style_set_bg_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_red</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">));</span>
    <span class="n">lv_style_set_bg_grad_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_red</span><span class="p">,</span> <span class="n">lv_palette_lighten</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Create styles from scratch for buttons.</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_get_started_2</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Initialize the style*/</span>
    <span class="n">style_init</span><span class="p">();</span>

    <span class="cm">/*Create a button and use the new styles*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="cm">/* Remove the styles coming from the theme</span>
<span class="cm">     * Note that size and position are also stored as style properties</span>
<span class="cm">     * so lv_obj_remove_style_all will remove the set size and position too */</span>
    <span class="n">lv_obj_remove_style_all</span><span class="p">(</span><span class="n">btn</span><span class="p">);</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>

    <span class="cm">/*Add a label to the button*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">btn</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Button&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>

    <span class="cm">/*Create an other button and use the red style too*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn2</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_remove_style_all</span><span class="p">(</span><span class="n">btn2</span><span class="p">);</span>                      <span class="cm">/*Remove the styles coming from the theme*/</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">80</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn_red</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn_pressed</span><span class="p">,</span> <span class="n">LV_STATE_PRESSED</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_radius</span><span class="p">(</span><span class="n">btn2</span><span class="p">,</span> <span class="n">LV_RADIUS_CIRCLE</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="cm">/*Add a local style too*/</span>

    <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">btn2</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Button 2&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="create-a-slider-and-write-its-value-on-a-label">
<h4>Create a slider and write its value on a label<a class="headerlink" href="#create-a-slider-and-write-its-value-on-a-label" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_get_started_3&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/get_started/lv_example_get_started_3.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_SLIDER</span>

<span class="k">static</span> <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span><span class="p">;</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">slider_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="cm">/*Refresh the text*/</span>
    <span class="n">lv_label_set_text_fmt</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;%d&quot;</span><span class="p">,</span> <span class="n">lv_slider_get_value</span><span class="p">(</span><span class="n">slider</span><span class="p">));</span>
    <span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">slider</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_TOP_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-15</span><span class="p">);</span>    <span class="cm">/*Align top of the slider*/</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Create a slider and write its value on a label.</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_get_started_3</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a slider in the center of the display*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider</span> <span class="o">=</span> <span class="n">lv_slider_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_width</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>                          <span class="cm">/*Set the width*/</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">slider</span><span class="p">);</span>                                  <span class="cm">/*Align to the center of the parent (screen)*/</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">slider_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>     <span class="cm">/*Assign an event function*/</span>

    <span class="cm">/*Create a label below the slider*/</span>
    <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;0&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">slider</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_TOP_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-15</span><span class="p">);</span>    <span class="cm">/*Align top of the slider*/</span>
<span class="p">}</span>

<span class="cp">#endif</span>

</pre></div>
</div>
</div>
</div>
</div>
<div class="section" id="id1">
<h3>MicroPython<a class="headerlink" href="#id1" title="Permalink to this headline">¶</a></h3>
<p>No examples yet.</p>
</div>
</div>
<div class="section" id="micropython">
<h2>Micropython<a class="headerlink" href="#micropython" title="Permalink to this headline">¶</a></h2>
<p>Learn more about <a class="reference internal" href="micropython.html"><span class="doc">Micropython</span></a>.</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="c1"># Create a Button and a Label</span>
<span class="n">scr</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">obj</span><span class="p">()</span>
<span class="n">btn</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">btn</span><span class="p">(</span><span class="n">scr</span><span class="p">)</span>
<span class="n">btn</span><span class="o">.</span><span class="n">align</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">(),</span> <span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
<span class="n">label</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">label</span><span class="p">(</span><span class="n">btn</span><span class="p">)</span>
<span class="n">label</span><span class="o">.</span><span class="n">set_text</span><span class="p">(</span><span class="s2">&quot;Button&quot;</span><span class="p">)</span>

<span class="c1"># Load the screen</span>
<span class="n">lv</span><span class="o">.</span><span class="n">scr_load</span><span class="p">(</span><span class="n">scr</span><span class="p">)</span>
</pre></div>
</div>
</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="pc-simulator.html" class="btn btn-neutral float-right" title="Simulator on PC" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="index.html" class="btn btn-neutral float-left" title="Get started" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2020, LVGL LLC.
      <span class="lastupdated">
        Last updated on Jan 10, 2022.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                const versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });
    
})
</script>


</body>
</html>